examples/sites/src/tools/useTheme.js (3)

6-6: Consider lazy loading theme assets for better performance.

The theme-related images are imported statically, which could impact the initial bundle size. Consider lazy loading these assets when they're needed, especially since theme switching is a dynamic operation.

Example approach:

- import glaciers from '@/assets/images/glaciers.png'
- import glaciersIcon from '@/assets/images/glaciers-icon.png'
+ const loadThemeAssets = async (theme) => {
+   const glaciers = await import('@/assets/images/glaciers.png')
+   const glaciersIcon = await import('@/assets/images/glaciers-icon.png')
+   return { image: glaciers.default, icon: glaciersIcon.default }
+ }

Also applies to: 18-18

---

Line range hint 90-103: Add error handling and support theme switching.

The current implementation has several potential issues:

1. The loadedTheme flag prevents reloading the old theme if users switch back to it after changing to another theme
2. Missing error handling for theme tool initialization
3. No cleanup of watchers on component unmount

Consider this improved implementation:

- let loadedTheme = false
+ let currentLoadedTheme = null
  const watchRoute = () => {
    if (initWatchRoute) {
      return
    }
    initWatchRoute = true
-   watch(
+   const stopWatch = watch(
      () => router.currentRoute.value.params.theme,
      (val) => {
-       if (!loadedTheme && val === 'old-theme') {
+       if (val === 'old-theme' && currentLoadedTheme !== 'old-theme') {
          const themeTool = new TinyThemeTool()
+         try {
            themeTool.changeTheme(tinyOldTheme)
-           loadedTheme = true
+           currentLoadedTheme = 'old-theme'
+         } catch (error) {
+           console.error('Failed to load old theme:', error)
+         }
+       } else if (val !== 'old-theme') {
+         currentLoadedTheme = val
        }
      }
    )
+   // Cleanup watcher when component unmounts
+   if (import.meta.hot) {
+     import.meta.hot.dispose(() => {
+       stopWatch()
+     })
+   }
  }

---

Line range hint 109-116: Add input validation and documentation for the theme hook.

The theme switching implementation could benefit from additional safety checks and documentation.

Consider these improvements:

+ /**
+  * Hook for managing theme switching functionality
+  * @returns {Object} Theme management utilities
+  * @property {Function} getThemeData - Returns copy of available theme data
+  * @property {Function} changeTheme - Switches to specified theme
+  * @property {Ref<string>} currentThemeKey - Current theme key
+  * @property {Object} designConfig - Current theme design configuration
+  * @property {string} defaultTheme - Default theme route value
+  */
 export default function useTheme() {
   !initWatchRoute && watchRoute()
+  const validateTheme = (themeKey) => {
+    if (!THEME_ROUTE_MAP[themeKey]) {
+      console.warn(`Invalid theme key: ${themeKey}`)
+      return false
+    }
+    return true
+  }
+
+  const safeChangeTheme = (themeKey) => {
+    if (validateTheme(themeKey)) {
+      changeTheme(themeKey)
+    }
+  }
   return {
     getThemeData,
-    changeTheme,
+    changeTheme: safeChangeTheme,
     currentThemeKey,
     designConfig,
     defaultTheme: THEME_ROUTE_MAP[defaultThemeKey]
   }
 }

packages/theme/src/old-theme-index.js (2)

5-5: Consider documenting typography scale ratios.

The typography system uses fixed pixel values. Consider adding documentation about the scale ratio between different sizes (sm, md, lg, xl, xxl) to maintain consistency when updates are needed.

---

5-5: Consider extracting Button variables to a separate component theme file.

Currently, Button-specific variables are embedded in the main theme file. As more components are added, this approach might not scale well.

Consider:

1. Creating a separate file for component-specific theme variables
2. Implementing a modular theme system where components can define their theme variables
3. Using a theme composition pattern to merge component themes with the base theme

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Search for shadow usage across components to verify consistency

# Look for shadow variable usage
rg --type js --type vue "shadow-[0-4]-(up|down|left|right)" -A 2

#!/bin/bash
# Search for shadow CSS variable usage with ripgrep
rg --type js "shadow-[0-4]|--tv-shadow-[0-4]" -A 2

# Also search for shadow properties in CSS/SCSS files
rg --type css "shadow-[0-4]|--tv-shadow-[0-4]" -A 2

#!/bin/bash
# Search for actual usage of shadow variables in component files
rg "var\(--tv-shadow-[0-4]" --type js --type css --type vue -A 1

# Search for box-shadow property usage
rg "box-shadow:" --type js --type css --type vue -A 1